<template>
	<view class="container ">
		<view v-if="addressList.length">
			<view class="u-type-white-bg u-p-30 u-radius-15 u-m-t-30" v-for="item in addressList" :key="item.id">
				<view class="u-flex u-row-between u-col-center u-p-b-30 u-border-bottom">
					<view @click="selectAddress(item)">
						<view class="u-flex u-col-center u-font-26 u-font-bold u-m-b-20">
							<view class="u-main-color u-m-r-30">{{item.username}}</view>
							<view class="u-tips-color">{{$u.func.hideStr(item.phone,3,4) }}</view>
						</view>
						<view class="u-flex  u-col-center">
							<u-tag text="默认" type="info" size="mini" mode="dark" v-if="item.is_default"></u-tag>
							<view class="u-flex-1 u-font-24 u-main-color u-m-l-10">{{ item.province + '' + item.city + '' + item.county  + '' + item.address}}</view>
						</view>
					</view>
					<u-icon  name="edit-pen" size="35" color="#a1a1a1" @click="goAddOrEditAddress(item.id)"></u-icon>
				</view>
				<view class="u-flex u-row-between u-col-center u-m-t-30">
					<view class="u-flex u-col-center" @click="setDefault(item)">
						<u-image v-show="item.is_default == 1" width="30" height="30" src="/static/address/success.png"></u-image>
						<u-image v-show="item.is_default == 0" width="30" height="30" src="/static/address/unChecked.png"></u-image>
						<text class="u-font-22 u-tips-color u-m-l-15">默认地址</text>
					</view>
					<view class="u-font-24 u-tips-color" @click="deleteItem(item,index)">删除</view>
				</view>
			</view>
		</view>
		<u-empty  v-else text="没有收货地址" imgWidth="2000" fontSize="20" marginTop="100" mode="address"></u-empty>
		<u-gap height="200"></u-gap>
		<view class="submit-btn safe-area-inset-bottom">
			<view class="u-flex u-row-between u-col-center u-p-20">
				<u-button class="u-flex-1 u-m-r-30" shape="circle" type="success" @click="goAddOrEditAddress('')" size="default" :custom-style="{background: '#009275'}">添加新地址</u-button>
				<u-button class="u-flex-1 u-m-l-30" shape="circle" type="success" size="default" :custom-style="{background: '#0FAF90'}" @click="importWhat">导入微信地址</u-button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			addressList: [],
			selectType: ''
		};
	},
	watch: {
		addressList(newValue) {
			// 监听地址是否为空如果为空传过去一个空值
			if (newValue.length === 0) {
				uni.$emit('selectAddressId','')
			}
		}
	},
	onLoad(options) {
		this.selectType = options.selectType;
		this.getAddressList();
		// 做出修改或添加或删除会触发重新获取请求
		uni.$on('againRequest', this.getAddressList);
	},
	onUnload() {
		uni.$off('againRequest', this.getAddressList);
	},
	methods: {
		// 导入微信地址
		importWhat(){
			uni.chooseAddress({
				success:(res)=>{
					let tempAddress = {
						username: res.userName, // 姓名
						phone: res.telNumber, // 电话
						address: res.detailInfo ,// 详细信息
						fullAddress: res.provinceName + res.cityName + res.countyName,
						areaName: [res.provinceName,res.cityName,res.countyName]
					}
					uni.navigateTo({
						url: '/pages/address/detail?type=1&tempAddress='+JSON.stringify(tempAddress)
					})
				},
				fail: (err) =>{
					// let tempAddress = {
					// 	username: '张振豪', // 姓名
					// 	phone: 19839436090, // 电话
					// 	address: '濮阳职业技术学院（华龙区黄河路西段）' ,// 详细信息
					// 	fullAddress: '河南省濮阳市华龙区',
					// 	areaName: ['河南省','濮阳市','华龙区']
					// }
					// uni.navigateTo({
					// 	url: '/pages/address/detail?type=1&tempAddress='+JSON.stringify(tempAddress)
					// })
					this.$u.toast('导入失败')
				}
			})
		},
		// 选择地址
		selectAddress(item) {
			if (!this.selectType) return;
			uni.$emit('selectAddressId',item.id)
			// this.$u.vuex('address_id', item.id);
			this.$u.vuex('addressEditFalg',!this.addressEditFalg)
			uni.navigateBack();
		},
		// 获取配送地址
		getAddressList(e) {
			uni.showLoading({
				mask: true,
				title: '加载中'
			});
			this.$u.api
				.findShopAddressList()
				.then(res => {
					if (res.code === 1) {
						this.addressList = res.data;
						if (!this.selectType) return;
						if(this.address_id == e.id) {
							this.$u.vuex('addressEditFalg',!this.addressEditFalg)
						}
						uni.hideLoading();
					}
				})
				.catch(err => {
					this.$u.toast(err.msg)
					uni.hideLoading();
				});
		},
		deleteItem(item,index){
			uni.showModal({
				title: '确定删除',
				success: (res) => {
					if(res.confirm) {
						// 删除地址
						let type = 'delete'
						this.$u.api.editShopAddress({id:item.id, type}).then(res => {
							this.$u.toast(res.msg,'success')
							this.addressList.splice(index,1)
							if (!this.selectType) return;
							if(this.address_id == item.id) {
								this.$u.vuex('address_id','')
								this.$u.vuex('addressEditFalg',!this.addressEditFalg)
							}
						}).catch(err => {
							this.$u.toast(err.msg)
						})
					}
				}
			})
		},
		// 设置默认
		setDefault(e){
			if(e.is_default == 1) return this.$u.toast('已经是默认了')
			uni.showModal({
				title: '确定设置成默认',
				success: (res) => {
					if(res.confirm) {
						// 删除地址
						let type = 'default'
						this.$u.api.editShopAddress({id: e.id, type}).then(res => {
							this.$u.toast(res.msg,'success')
							this.addressList = this.addressList.map(item => {
								if(item.id == e.id){
									return {...item,is_default: 1}
								}else {
									return {...item,is_default: 0}
								}
							})
							setTimeout(() =>	this.selectAddress(e.id),1500)
						}).catch(err => {
							this.$u.toast(err.msg)
						})
					}
				}
			})
		},
		// 去编辑页面
		goAddOrEditAddress(id) {
			if (id) {
				uni.navigateTo({
					url: `/pages/address/detail?id=${id}`
				});
			} else {
				uni.navigateTo({
					url: '/pages/address/detail'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding: 0 30rpx;
	.submit-btn {
		background: #fff;
	}
}


</style>
